<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Into Nature</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header id="page-header">
        <div class="page-header-content">
            <nav class="site-nav">
                <div class="site-logo">
                    <a href="#"><img src="images/into-nature.drawio.png" alt="logo"></a>
                </div>
                <ul class="site-menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#about-us">About Us</a></li>
                    <li><a href="#achievement">Achivement</a></li>
                    <li><a href="#popular-locations">Popular Locations</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                </ul>
                <a href="#"><i class="site-menu-button ri-menu-line"></i></a>
            </nav>
            <div class="hero">
                <h1>Into Nature</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                <a href="#" class="btn">Explore</a>
            </div>
        </div>
        <div class="overlay"></div>
    </header>
    <main id="page-body">
        <section id="about-us">
            <h2>About Us</h2>
            <div class="about-us-content">
                <img src="images/team.jpg" alt="Our Team">
                <div class="intro">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut doloremque accusantium
                        assumenda, id nam nobis maxime corrupti! Eos cumque quia maiores consequuntur quod animi,
                        eveniet dignissimos tempora blanditiis ipsum aliquid quasi, earum, pariatur nam.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid iste, ducimus temporibus laborum
                        suscipit numquam soluta incidunt dignissimos. Provident unde necessitatibus sequi esse
                        voluptatem voluptatibus illum at.</p>
                </div>
            </div>
        </section>
        <section id="achievement">
            <h2>Our Achivement</h2>
            <ul class="stat-cards"> <!-- will be a flex container -->
                <li class="stat-card"> <!--flex item-->
                    <div> <!-- for changing size easily -->
                        <i class="ri-team-line"></i>
                        <div class="info">
                            <h4>Customers</h4>
                            <span>5487</span>
                        </div>
                    </div>
                </li>
                <li class="stat-card">
                    <div>
                        <i class="ri-line-chart-line"></i>
                        <div class="info">
                            <h4>Customer Annual Growth Rate</h4>
                            <span>6.5%</span>
                        </div>
                    </div>
                </li>
                <li class="stat-card">
                    <div>
                        <i class="ri-service-line"></i>
                        <div class="info">
                            <h4>Total Services</h4>
                            <span>8717</span>
                        </div>
                    </div>
                </li>
                <li class="stat-card">
                    <div>
                        <i class="ri-earth-line"></i>
                        <div class="info">
                            <h4>Serve In Countries</h4>
                            <span>47</span>
                        </div>
                    </div>
                </li>

            </ul>
        </section>
        <section id="popular-locations">

            <h2>Popular Locations</h2>
            <ul class="popular-location-cards">
                <li class="popular-location-card">
                    <div>
                        <img src="images/lake-1.jpg" alt="">
                        <div class="location">
                            <h4>Location 1</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                            <div class="rating">
                                <div class="stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-half-fill"></i>
                                    <i class="ri-star-line"></i>
                                </div>
                                <span>18987 reviews</span>
                            </div>
                            <a href="#" class="btn">Explore</a>
                        </div>
                    </div>
                </li>
                <li class="popular-location-card">
                    <div>
                        <img src="images/mountains-1.jpg" alt="">
                        <div class="location">
                            <h4>Location 2</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                            <div class="rating">
                                <div class="stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-half-fill"></i>
                                    <i class="ri-star-line"></i>
                                </div>
                                <span>18987 reviews</span>
                            </div>
                            <a href="#" class="btn">Explore</a>
                        </div>
                    </div>
                </li>
                <li class="popular-location-card">
                    <div>
                        <img src="images/forest-path-1.jpg" alt="">
                        <div class="location">
                            <h4>Location 3</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                            <div class="rating">
                                <div class="stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-half-fill"></i>
                                    <i class="ri-star-line"></i>
                                </div>
                                <span>18987 reviews</span>
                            </div>
                            <a href="#" class="btn">Explore</a>
                        </div>
                    </div>
                </li>
                <li class="popular-location-card">
                    <div>
                        <img src="images/lavender-field.jpg" alt="">
                        <div class="location">
                            <h4>Location 4</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                            <div class="rating">
                                <div class="stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-half-fill"></i>
                                    <i class="ri-star-line"></i>
                                </div>
                                <span>18987 reviews</span>
                            </div>
                            <a href="#" class="btn">Explore</a>
                        </div>
                    </div>
                </li>
                <li class="popular-location-card">
                    <div>
                        <img src="images/beach-1.jpg" alt="">
                        <div class="location">
                            <h4>Location 5</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                            <div class="rating">
                                <div class="stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-half-fill"></i>
                                    <i class="ri-star-line"></i>
                                </div>
                                <span>18987 reviews</span>
                            </div>
                            <a href="#" class="btn">Explore</a>
                        </div>
                    </div>
                </li>
                <li class="popular-location-card">
                    <div>
                        <img src="images/mountains-2.jpg" alt="">
                        <div class="location">
                            <h4>Location 6</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                            <div class="rating">
                                <div class="stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-half-fill"></i>
                                    <i class="ri-star-line"></i>
                                </div>
                                <span>18987 reviews</span>
                            </div>
                            <a href="#" class="btn">Explore</a>
                        </div>
                    </div>
                </li>
                <li class="popular-location-card">
                    <div>
                        <img src="images/forest-path-2.jpg" alt="">
                        <div class="location">
                            <h4>Location 7</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                            <div class="rating">
                                <div class="stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-half-fill"></i>
                                    <i class="ri-star-line"></i>
                                </div>
                                <span>18987 reviews</span>
                            </div>
                            <a href="#" class="btn">Explore</a>
                        </div>
                    </div>
                </li>
                <li class="popular-location-card">
                    <div>
                        <img src="images/lake-2.jpg" alt="">
                        <div class="location">
                            <h4>Location 8</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
                            <div class="rating">
                                <div class="stars">
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-fill"></i>
                                    <i class="ri-star-half-fill"></i>
                                    <i class="ri-star-line"></i>
                                </div>
                                <span>18987 reviews</span>
                            </div>
                            <a href="#" class="btn">Explore</a>
                        </div>
                    </div>
                </li>
            </ul>

        </section>
        <section id="testimonials">
            <h2>Testimonials</h2>
            <div class="slider">
                <div class="testimonial-cards">

                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur architecto fugit illum amet commodi totam ratione iure reiciendis nemo, aliquid facere quis mollitia quas distinctio voluptates impedit, est quibusdam, eius quisquam. Et, facere sapiente.</p>
                        </div>
                        <div class="testimonial-info">
                            <img src="images/male-1.jpeg" alt="">
                            <div class="testimonial-name">
                                <h4>Linwood Truman</h4>
                                <span>CEO of Company</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui excepturi nihil, earum delectus aspernatur iure iste id magnam culpa sit quidem praesentium, nesciunt quibusdam commodi dignissimos eaque accusamus blanditiis suscipit voluptatibus quod pariatur?</p>
                        </div>
                        <div class="testimonial-info">
                            <img src="images/female-2.jpeg" alt="">
                            <div class="testimonial-name">
                                <h4>Wen Mah</h4>
                                <span>Hotel Manager</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur eaque odit minus molestiae temporibus, aliquid asperiores iusto deleniti neque est quam voluptatem alias vero consectetur modi? Obcaecati vel dolorum reprehenderit deleniti magnam, optio asperiores porro voluptatum.</p>
                        </div>
                        <div class="testimonial-info">
                            <img src="images/male-2.jpeg" alt="">
                            <div class="testimonial-name">
                                <h4>Johnny Hopson
                                </h4>
                                <span>Accountant</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima tempore ducimus necessitatibus voluptatem quis deleniti iusto? Illum assumenda harum reprehenderit consequatur maxime voluptatibus.</p>
                        </div>
                        <div class="testimonial-info">
                            <img src="images/female-1.jpeg" alt="">
                            <div class="testimonial-name">
                                <h4>Augusta Hodgson
                                </h4>
                                <span>Pediatrician</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur architecto fugit illum amet commodi totam ratione iure reiciendis nemo, aliquid facere quis mollitia quas distinctio voluptates impedit, est quibusdam, eius quisquam. Et, facere sapiente.</p>
                        </div>
                        <div class="testimonial-info">
                            <img src="images/male-1.jpeg" alt="">
                            <div class="testimonial-name">
                                <h4>Linwood Truman</h4>
                                <span>CEO of Company</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </main>
    <footer id="page-footer">
        <div class="page-footer-container">
            <div class="footer-links">
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Destinations</a></li>
                    <li><a href="#">Hotels</a></li>
                    <li><a href="#">Tours</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms & Conditions</a></li>
                    <li><a href="#">Press</a></li>
                </ul>
            </div>
            <div class="footer-social">
                <a href="#"><i class="ri-facebook-fill"></i></a>
                <a href="#"><i class="ri-instagram-fill"></i></a>
                <a href="#"><i class="ri-twitter-fill"></i></a>
                <a href="#"><i class="ri-youtube-fill"></i></a>
            </div>
        </div>
    </footer>
</body>

</html>